<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <p><input type="text" v-model="msg" ></p>
        <myhead></myhead>
        <hr>
        <parent></parent>
    </div>

    <template id="parent">
        <div>
            <h2>parent  - parent - 父组件 </h2>
            
            <hr>
            <childone
                :show="show"
                ref="childone"
            ></childone>
            <hr>
            <childtwo
                :changeshow="changeshow"
                @clickdonedonedone="changeshow"
                :changechildonebyref="changechildonebyref"
            ></childtwo>
            <hr>

        </div>
    </template>

    <template id="childone">
        <div>
            <h2>childone  - childone - 1 - 子组件 </h2>
            <h2>count--- {{count}}</h2>
            <button @click="changetwocount">修改 childtwo 的 count </button>
            <p>
                <input type="text" v-model="inp" >
            </p>
            <div  :style="{width:'200px',height:'200px',color:'#fff',background:'purple',display:show?'block':'none'}" >
                我被子组件Two控制....
            </div>
        </div>
    </template>
    <template id="childtwo">
        <div>
            <h2>childtwo  - childtwo - 2 - 子组件 </h2>
            <h4>count === {{count}}</h4>
            <h3>word == {{word}}</h3>
            <button @click="changeOne">$parent 去修改组件one 的show </button>
            <button @click="changeshow">反向props  去修改组件one 的show </button>
            <button @click="clickdone">自定义事件  去修改组件one 的show </button>
            <button @click="changeonecount"> refs 修改子组件 one  的count  </button>
        </div>
    </template>

    <script>
        const bus = new Vue() ;  // 空的Vue 实例对象 实现组件通信 emit  on     once 
        Vue.component("myhead",{
            template:"<header>wh2107 - 天道酬勤 </header>"
        })
        
        Vue.component('parent',{
            template:"#parent",
            data(){
                return {
                    show:true
                }
            },
            methods:{
                changeshow(){
                    this.show = !this.show;
                },
                changechildonebyref(){
                    this.$refs.childone.count+=100;
                }
            }
        })
        Vue.component("childone",{
            template:"#childone",
            data(){
                return {
                    inp:'666',
                    count:2107
                }
            },
            props:['show'],
            watch:{
                inp(v){
                    this.bus.$emit("changeword",v);
                }
            },
            methods:{
                changetwocount(){
                    this.bus.$emit("qweqqweqweeqwqeewqewqe",100);
                }
            }
        })

        Vue.component("childtwo",{
            template:"#childtwo",
            data(){
                return {
                    count:1800,
                    word:"2107-daydayup-vue-yyds"
                }
            },
            props:['changeshow','changechildonebyref'],
            methods:{
                changeonecount(){
                    // this.$parent.$refs.childone.count++;
                    this.changechildonebyref()
                },
                changeOne(){
                    this.$parent.show = !this.$parent.show;
                    // this.changeshow()
                },
                clickdone(){
                    this.$emit("clickdonedonedone")
                }
            },
            created(){
                this.bus.$on("changeword",word=>{
                    this.word = word; 
                })
            },  
            mounted(){
                this.bus.$on("qweqqweqweeqwqeewqewqe",num=>{
                    this.count+=num;
                })
            }
        })
        Vue.prototype.bus = bus; //this.bus 
        const vm = new Vue({
            // el:"#app",
            // bus,  // this.bus  子组件获取 
            data:{
                msg:"父子组件通信 - 兄弟组件通信  ",
                flag:true 
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.msg 
            }
        }).$mount("#app")
    </script>

    <!-- 
        组件  小巧  独立  可复用  
        组件系统 
        组件组织关系  
        1. 父子组件关系
        <A> 
            <B></B>
            <C></C>
        </A>
        2. 兄弟组件关系  
        <B></B>
        <C></C>

        Emit
        On
        Once  只触发一次  


        组件之间的通信  
        1. 父组件访问子组件      （父组件修改子组件）
        a. props  必须动态props 父组件修改自身的变量  把变化的值传入 子组件  子组件接收动态props 
        b. refs      
        c. 事件center总线 (bus new Vue)
        d. events 事件 
        e. vuex (最后一天) 

        2. 子组件访问父组件
        a.  自定义事件   emit  子组件发送事件    on 父组件监听事件 修改内部变量   
        b.  $parent     父实例，如果当前实例有的话  父组件  
        c.  逆向props   父组件 把修改自身变量的方法函数通过props 传递给子组件 子组件执行这个props函数  实现子改父 
        d.  事件center总线   
        e.  vuex   
        
        3.  兄弟组件之间的通信  
        a. 事件center总线 (bus new Vue)=
        b. 中间人模式  (子改父  父改子 )   把父亲当做中间人  
        c. vuex  

        refs   this.$refs  
        1. 绑定到标签  指的当前的真实DOM 
        2. 绑定到组件  指的是当前的组件对象  直接修改组件内的变量  直接调用组件内部的函数 
     -->
 
</body>
</html>